import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from 'antd-mobile';
import './ShopDetail.scss'
import myaxios from '../../utils/myaxios'

export default class ShopDetail extends Component {
  constructor(props) {
    super(props)
  }
  state = {
    goodInfo: {},
    imgHeight: 250,
    // 默认轮播图是否显示 默认情况不显示
    showSwiper:false,
    showCollect: false
  }
  componentDidMount() {
    let { goods_id } = this.props.match.params
    myaxios.get('goods/detail', {
      params: {
        goods_id,
      },
    }).then((res) => {
      this.setState({
        goodInfo: res,
        showSwiper:true
      })
    }).catch((err) => { console.log(err) })

    let collects_str = localStorage.getItem('collects')
    let collects = JSON.parse(collects_str || "[]")

    let index = collects.findIndex(v => {
      if (v.goods_id === parseInt(goods_id)) {
        return true
      }
    })
    console.log(index)

    if (index != -1) {

      this.setState({
        showCollect:true
      })
    }
  }
  //收藏
  handleCollect = () => {
    let collects_str = localStorage.getItem('collects')

    let collects = JSON.parse(collects_str || "[]")

    let index = collects.findIndex(v => {
      if (v.goods_id === this.state.goodInfo.goods_id) {
        return true
      }
    })
    if (index !== -1) {
      //代表已经收藏过了
      collects.splice(index, 1)
      Toast.info("取消收藏成功", 1)
      this.setState({
        showCollect: false
      })
    } else {
      Toast.info("收藏成功", 1)
      collects.push(this.state.goodInfo)
      this.setState({
        showCollect: true
      })
    }
    localStorage.setItem("collects", JSON.stringify(collects))
  }

  // 添加到购物车中
  addToCart = (params) => {
    // 1.首先从本地缓存中获取购物车数据
    let carts_str = localStorage.getItem('carts');
    let carts = JSON.parse(carts_str || "[]");
    //获取goods_id
    let {goods_id} = this.props.match.params;
    let index = carts.findIndex(v=>{
      if(v.goods_id === goods_id){
          return true
      }
    })
    // index === -1 代表找不到
    if(index === -1){
      let goods_info = this.state.goodInfo
      goods_info.num = 1;  //第一次添加数量为1
      goods_info.checked = true; //添加在购物车中默认选中
      carts.push(goods_info)
    }else{
      carts[index].num++ //已有情况下加1
    }
    Toast.info("加入购物车成功",1)
    localStorage.setItem('carts',JSON.stringify(carts));
  }
  //去购物车
  goToCart = (params) => {
    this.props.history.push("/cart")
  }
  //去购买
  pay = (params) => {
    this.props.history.push('/pay')
  }
  
  render() {
    // console.log(this.state.goodInfo)
    let { pics } = this.state.goodInfo;

    return (
      <div className='yg-detail'>
        {/* 顶部导航开始 */}
        <div className='detail-center-navBar'>
          <NavBar className='center-navBar'
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
          >商品详情</NavBar>
        </div>
        {/* 顶部导航结束 */}
        {/* 商品轮播开始 */}
        <div className='yg-detail-swiper'>
          {this.state.showSwiper && (
          <Carousel
            autoplay={true}
            infinite
          >
            {/* {!!pics&&pics.map((v) => { */}
            {!!pics&&pics.map((v) => {
              return (
                <div className='imageWrapper'
                  key={v.goods_id}
                  style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                  <img
                    src={v.pics_mid}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </div>)
            })}
          </Carousel>
          )}
        </div>
        {/* 商品轮播结束 */}
        {/* 商品收藏分享开始 */}
        <div className='yg-detail-share'>
          <span>￥ {this.state.goodInfo.goods_price}</span>
          <div className='detail-share-box'>
            <i className='iconfont icon-fenxiang'></i>
            <i onClick={this.handleCollect} className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"}></i>
          </div>
        </div>
        {/* 商品收藏分享结束 */}
        {/* 商品标题开始 */}
        <div className='yg-detail-title'>
          {this.state.goodInfo.goods_name}
        </div>
        {/* 商品标题结束 */}
        {/* 商品图文详情开始 */}
        <div className='yg-detail-particulars'>
          <div className='twxq'>
             图文详情
          </div>
          {
            <div dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}></div>
          }
        </div>
        {/* 商品图文详情结束 */}
        {/* 底部加入购物车开始 */}
        <div className='yg-detail-bottom'>
          <div className='bottom-service'>
            <i className='iconfont icon-kefu'></i>
            <span>联系客服</span>
          </div>
          <div onClick={this.goToCart} className='bottom-goCart'>
            <i className='iconfont icon-gouwuche'></i>
            <span>购物车</span>
          </div>
          <div className='bottom-addCart'>
            <div onClick={this.addToCart} className='bottom-addCart-btn'>加入购物车</div>
          </div>
          <div onClick={this.pay} className='bottom-pay'>
            <div className='bottom-pay-btn'>立即购买</div>
          </div>
        </div>
        {/* 底部加入购物车结束 */}
      </div>
    )
  }
}
